<script setup lang='ts'>
import { onMounted, ref } from "vue";
import { getBuy,ailpay,userLogin } from "../../api/api";
import headerVue from "../../components/pc/headerVue.vue";
import footerVue from "../../components/pc/footerVue.vue";
const data = ref()
const num = ref(0)
const money = ref()
//获取数据
const getUserData = async(e:string) => {
    const mail = await userLogin({_id:localStorage.getItem('mail') as string})
    money.value = {money:e,data:mail.data.data.mail}
}

const getData = async () => {
    const res = await getBuy()
    data.value = res.data.data
    getUserData(data.value[0].money)
}
const thisData = (money:string,e:number) => {
    num.value = e
    getUserData(money)
}
//创建支付
const alipaySdk = async() => {
    const res = await ailpay(money.value)
    if(res.data.code === '404'){
        localStorage.removeItem('token')
        localStorage.removeItem('mail')
        alert('请先登录')
        return
    }
    window.location.href = res.data.data
}
onMounted(() => {
    getData()
})
</script>

<template>
    <headerVue></headerVue>
    <div class="contentpc">
        <img class="bigImg" src="../../../public/1704345359403.4dcf861.png" alt="">
        <div class="data">
            <el-alert title="如果出现支付后,帐号积分没变,请联系客服~" type="success" />
            <div class="buy-data">
                <div 
                @click="thisData(i.money,index)" 
                :class="['buy',num === index ? 'back' : '']" 
                v-for="(i,index) in data"
                >
                    <h3>积分全站可用</h3>
                    <div class="text">
                        <span style="color: red;">￥</span>
                        <h1 style="color: red;">{{i.money}}</h1>
                        <h3 style="position: relative;top: 5px;color: red;">/</h3>
                        <span style="color: red;">{{i.integral}}积分</span>
                        <span class="money">
                            ￥{{i.money}}0
                        </span>
                    </div>
                    <div class="textData">
                        全站类目 终身海量下载
                    </div>
                </div>
            </div>
            <div class="btn">
                <h3>支付方式：</h3>
                <div class="btnData" @click="alipaySdk">
                    <img class="zfb" src="../../../public/支付宝支付.png" alt="">
                    <p>支付宝</p>
                </div>
            </div>
        </div>
        <div class="depa">
            <h3>沙雕动画素材</h3>
            <p>购买积分调用以下全部</p>
            <div class="depaData">
                <div class="depaF">整站人物素材</div>
                <div class="depaF">整站物品素材</div>
                <div class="depaF">剪辑从零到一教学</div>
                <div class="depaF">素材教学</div>
            </div>
        </div>
    </div>
    <footerVue></footerVue>
</template>

<style scoped>
.contentpc {
    max-width: 100%;
    min-height: 800px;
    margin: auto;
    margin-top: 60px;
}

.bigImg {
    width: 100%;
}

.data {
    max-width: 1500px;
    min-height: 600px;
    background-color: white;
    margin: auto;
    margin-top: 20px;
    box-sizing: border-box;
    padding: 20px;
}

.buy-data {
    width: 100%;
    height: 70%;
    display: grid;
    grid-template-columns: repeat(3,1fr);

}

.buy {
    width: 300px;
    height: 200px;
    margin: auto;
    border: 2px solid #E8E8E8;
    border-radius: 12px;
    background: #FFFFFF;
    margin-top: 20px;
    transition: 0.3s border ease;
    text-align: center;
    box-sizing: border-box;
    padding: 30px;
}
.buy:hover{
    border: 2px solid #FF5326 !important;
    cursor: pointer;
}
.back{
    background-image: url(../../../public/active_icon.svg);
    border: 2px solid #FF5326 !important;
    background-position: right bottom;
    background-repeat: no-repeat;
}
.text{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 25px;
}
.money{
    position: absolute;
    left: 50%;
    top: -5px;
    font-size: 13px;
    color: #999;
    text-decoration: line-through;
}
span{
    position: relative;
    top: 3px;
}
.btn{
    width: 87%;
    margin: auto;
    margin-top: 40px;
    display: flex;
    align-items: center;
}
.btnData{
    background: #e5e9f2;
    border-radius: 10px;
    display: flex;
    align-items: center;
    font-size: 14px;
    justify-content: center;
    margin-left: 20px;
    text-align: center;
    width: 200px;
    height: 60px;
    font-size: 15px;
    font-weight: bold;
    border: 2px solid #99a9bf;
    cursor: pointer;
}
.zfb{
    width: 15%;
    margin-right: 5px;
}
.textData{
    height: 40px;
    margin-top: 20px;
    line-height: 60px;
    color: #999;
    border-top: 1px dashed transparent;
    background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, #B2B9BD 0, #B2B9BD 4px, white 0, white 6px);
}
.depa{
    max-width: 1500px;
    margin: auto;
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}
.depaData{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
}
.depaF{
    background: #d3dce646;
    height: 35px;
    border-radius: 5px;
    margin-top: 20px;
    line-height: 35px;
    font-weight: bold;
}
</style>